<template>
	<view class="profile">
	  <uni-forms :model="formData">
		<view class="avatar">
		  <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="image" :src="formData.avatar" />
		  </button>
		</view>
		<uni-forms-item name="nickName">
		  <uni-easyinput type="text" v-model="formData.nickName" placeholder="请输入昵称" />
		</uni-forms-item>
	  </uni-forms>
	  <button class="btn" @click="getPhoneNumber">提交</button>
	</view>
  </template>

  <script setup>
  import { reactive } from 'vue';
  import userApi from '@/api/user';
  const formData = reactive({
	avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
  });

  function onChooseAvatar(e) {
	const { avatarUrl } = e.detail;
	formData.avatar = avatarUrl;
  }
  async function getPhoneNumber() {
	try {
	  const res = await userApi.updateWXUserInfo(formData);
if (res.code === 200) {
  // 假设 res.data 包含 avatar 和 nickName 字段
  formData.avatar = res.data.avatar;
  formData.nickName = res.data.nickName;

  uni.showToast({
    title: '修改个人信息完成',
    icon: 'checkmarkempty',
    duration: 2000
  });
  setTimeout(function() {
	uni.switchTab({url: '/pages/index/index' })
}, 3000);
}
	} catch (error) {
	  console.log(error);
	}
  }
  </script>

  <style lang="scss" scoped>
  .profile {
	width: 80%;
	margin-left: 10%;
	margin-top: 20px;
  }

  .avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	padding: 0 10rpx;
	margin-top: 50px;
	margin-bottom: 50px;
  }

  .avatar button {
	display: flex;
	align-items: center;
	height: 150rpx;
	padding: 0 20rpx;
	background-color: transparent;
	border: none;
  }

  .avatar .image {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	background-size: cover;
	vertical-align: middle;
  }

  .btn {
	background-color: #00b26a;
  }
  </style>
